<template>
  <!-- 城市学历薪资雷达图 -->
  <div class="barChart"></div>
</template>

<script>
import { getOneCitySalary } from "@/api/page2Api";
export default {
  name: "",
  data() {
    return {
      data: [],
      xueli1: [],
      xueli2: [],
      xueli3: [],
      cityData: []
    };
  },
  props: {
    oneCityData: Array,
  },
  watch: {
    oneCityData(newV, oldV) {
      if (newV.length > 0) this.getData(newV);
    },
  },
  methods: {
    setChart() {
      // 指定图表的配置项和数据
      var option = {
        // backgroundColor: 'rgba(204,204,204,0.7 )',         // 背景色，默认无背景	rgba(51,255,255,0.7)
        // color: ["purple", "rgba(177,133,15,1)", "rgba(139,228,159,1)"],
        title: {
          text: "部分城市学历薪资雷达图",
          top: "5%",
          left: "3%",
          textStyle: {
            color: "#75deef",
            fontSize: 13,
          },
        },

        legend: {
          // 图例组件
          show: true,
          icon: "circle", // 图例项的 icon。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。可以通过 'path://' 将图标设置为任意的矢量路径。
          top: "8%", // 图例距离顶部边距
          right: "5%", // 图例距离左侧边距
          orient: "vertical",
          itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 10,
          itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 13,
            color: "#fff",
          },
          data: [
            {
              // 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。
              name: "大专", // 图例项的名称，应等于某系列的name值（如果是饼图，也可以是饼图单个数据的 name）。
              icon: "rect", // 图例项的 icon。
              textStyle: {
                // 图例项的文本样式。
                color: "#fff",
                fontWeight: "bold", // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
              },
              itemStyle: {
                background: "#0f0", // 图例标记的图形高度。[ default: 14 ]
                color: "#0f0",
              },
            },
            {
              name: "本科",
              icon: "rect",
              textStyle: {
                color: "#fff",
                fontWeight: "bold", // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
              },
            },
            {
              name: "硕士",
              icon: "rect",
              textStyle: {
                color: "#fff",
                fontWeight: "bold", // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
              },
            },
          ],
        },

        radar: [
          {
            // 雷达图坐标系组件，只适用于雷达图。
            center: ["50%", "60%"], // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: 120, // 圆的半径，数组的第一项是内半径，第二项是外半径。
            startAngle: 90, // 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
            name: {
              // (圆外的标签)雷达图每个指示器名称的配置项。
              formatter: "{value}",
              textStyle: {
                fontSize: 15,
                color: "#000",
              },
            },
            nameGap: 15, // 指示器名称和指示器轴的距离。[ default: 15 ]
            splitNumber: 4, // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
            shape: "circle", // 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
            axisLine: {
              // (圆内的几条直线)坐标轴轴线相关设置
              lineStyle: {
                color: "#fff", // 坐标轴线线的颜色。
                width: 1, // 坐标轴线线宽。
                type: "solid", // 坐标轴线线的类型。
              },
            },
            splitLine: {
              // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
              lineStyle: {
                color: "#fff", // 分隔线颜色
                width: 2, // 分隔线线宽
              },
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                // color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],       // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              },
            },
            indicator: this.cityData.map(item => ({text: item,color: '#fff'}))
          },
        ],
        series: [
          {
            name: "雷达图", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            type: "radar", // 系列类型: 雷达图
            itemStyle: {
              // 折线拐点标志的样式。
              normal: {
                // 普通状态时的样式
                lineStyle: {
                  width: 1,
                },
                opacity: 0.2,
              },
              emphasis: {
                // 高亮时的样式
                lineStyle: {
                  width: 5,
                },
                opacity: 1,
              },
            },
            data: [
              {
                // 雷达图的数据是多变量（维度）的
                name: "硕士", // 数据项名称
                value: this.xueli3, // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
                symbol: "circle", // 单个数据标记的图形。
                symbolSize: 5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                label: {
                  // 单个拐点文本的样式设置
                  normal: {
                    show: true, // 单个拐点文本的样式设置。[ default: false ]
                    position: "top", // 标签的位置。[ default: top ]
                    distance: 5, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                    color: "purple", // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                    fontSize: 14, // 文字的字体大小
                    formatter: function (params) {
                      return params.value;
                    },
                  },
                },
                // itemStyle: {
                //   // 单个拐点标志的样式设置。
                //   normal: {
                //     borderColor: "purple", // 拐点的描边颜色。[ default: '#000' ]
                //     borderWidth: 3, // 拐点的描边宽度，默认不描边。[ default: 0 ]
                //   },
                // },
                lineStyle: {
                  // 单项线条样式。
                  normal: {
                    opacity: 1, // 图形透明度
                  },
                },
                areaStyle: {
                  // 单项区域填充样式
                  normal: {
                    // color: "purple", // 填充的颜色。[ default: "#000" ]
                  },
                },
              },
              {
                name: "本科",
                value: this.xueli2,
                symbol: "circle",
                symbolSize: 5,
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    distance: 5,
                    // color: "rgba(139,228,159,1)",
                    fontSize: 14,
                    formatter: function (params) {
                      return params.value;
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    // borderColor: "rgba(139,228,159,1)",
                    borderWidth: 3,
                  },
                },
                lineStyle: {
                  normal: {
                    opacity: 1,
                  },
                },
                areaStyle: {
                  normal: {
                    // color: "rgba(139,228,159,1)",
                  },
                },
              },
              {
                name: "大专",
                value: this.xueli1,
                symbol: "circle",
                symbolSize: 5,
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    distance: 5,
                    color: "rgba(177,133,15,1)",
                    fontSize: 14,
                    formatter: function (params) {
                      return params.value;
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    borderColor: "rgba(177,133,15,1)",
                    borderWidth: 3,
                  },
                },
                lineStyle: {
                  normal: {
                    opacity: 1,
                  },
                },
                areaStyle: {
                  normal: {
                    // color: "rgba(177,133,15,1)",
                  },
                },
              },
            ],
          },
        ],
      };

      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
    getData(newV) {
      newV.forEach((item, index) => {
        if (newV.length > 0&&item.length>0) {
          this.cityData.push(item[0].location)
          item.forEach((it, i) => {
            if (i == 0) this.xueli1.push(it.salary);
            if (i == 1) this.xueli2.push(it.salary);
            if (i == 2) this.xueli3.push(it.salary);
          });
        }
      });
      console.log(this.cityData,'>>>>>>>>>');
      this.setChart();
    },
  },
  mounted() {

  },
};
</script>

<style lang="less" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>